<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .node {
        position: absolute;
        transition: 0.5s;
        width: 100px;
        height: 20px;
        border: solid;
        background-color: aliceblue;
        opacity: 1;
        box-sizing: border-box;
        min-width: 500px;
    }

    .node.hidden {
        opacity: 0;
        /* height: 0px; */
        transform: scaleY(0%);
    }
</style>

<body>
    <script type="module">
        import { _dir, diff, updateDiff } from "./vStorage.js"
        const paddingWidth = 20;
        const paddingHeight = 40;
        // 绘制div，调用draw 0，draw 1来实现变更
        //首先检查，要求每个元素都有一个div，如果有div的话，就将其内容改变到适合的状态；如果没有div的话，给它新建一个
        //首次绘制时，需要将所有的node都绘制一个div，对于没有初始状态的div，增加hidden的class
        //如果旧状态没有node，那就按照新状态的x、y绘制，然后施加隐藏效果
        function drawDiv(diff, index) {
            index = index ?? 1;
            for (let key in diff) {
                let div = diff[key].item;
                if (!div) {
                    div = document.createElement("div");
                    div.classList.add("node");
                    document.body.append(div);
                    diff[key].item = div;
                }

                if (!diff[key].node[index]) {
                    if (index === 0) {
                        //进入到这个位置，说明新状态有该div，但是旧状态没有该div
                        //按照新状态的参数对其进行设置，但是施加隐藏效果
                        div.classList.add("hidden");
                        div.style.left = `${paddingWidth * diff[key].col[1]}px`;
                        div.style.top = `${paddingHeight * diff[key].row[1]}px`;
                        div.innerText = diff[key].node[1].name;
                    } else {
                        //进入到这个位置，说明新状态没有该div，但是旧状态有该div
                        //直接给div施加一个隐藏效果，并且在transaction结束时施加remove
                        div.classList.add("hidden");
                        div.onTransitionEnd = (e) => {
                            if (document.body.contains(div)) {
                                document.body.remove(div);
                                div.onTransitionEnd = null;
                                diff[key].item = null;
                            }
                        }
                    }
                }
                else {//此时前后状态都有div，则按照当前状态渲染即可
                    div.style.left = `${paddingWidth * diff[key].col[index]}px`;
                    div.style.top = `${paddingHeight * diff[key].row[index]}px`;
                    div.style.height=`${paddingHeight*(diff[key].maxRow-diff[key].row[index]+1)}px`;
                    div.innerText = diff[key].node[index].name;
                    div.style.zIndex=diff[key].col[index];
                    div.classList.remove("hidden");
                }

            }
        }
        let keys = [
            "0::d:zero",
            "1::d:dir1",
            "2:0:f:file2",
            "3:0:f:file3",
            "4:1:f:file4"
        ]
        let result1 = _dir(keys)
        // console.log(JSON.stringify(result, null, 2))
        let diffBefore = diff(result1)
        drawDiv(diffBefore, 0)
        // console.log(diffBefore)
        // console.log(JSON.stringify(diffBefore, null, 2))
        keys = [
            "0:1:d:zero",
            "1::d:dir1",
            "2:0:f:file2",
            "3:0:f:file3",
            "4:1:f:file4",
            "5::f:file5",
            "6::d:dir0"
        ]
        // 计算差值后绘制，下次更新时，是否需要将新的滚动给旧的？
        // 需要，通过这种方式才能复用div
        // 因此，在初始化完成后（初次读取，绘制），后续的每次求差分并绘制都需要基于当前状态进行
        // 
        let result2 = _dir(keys)
        let diffAfter = diff(result2, true, diffBefore);
        // setTimeout(() => drawDiv(diffAfter), 1000);
        drawDiv(diffAfter);
        setInterval(() => {
            updateDiff(result1, diffAfter);
            diffAfter = diff(result1, true, diffAfter);
            drawDiv(diffAfter);
            setTimeout(() => {
                updateDiff(result2, diffAfter);
                diffAfter = diff(result2, true, diffAfter);
                drawDiv(diffAfter);
            }, 2000)
        }, 4000)
        // setInterval(()=>{
        //     let diffBefore=diff(result1)
        //     let diffAfter=diff(result2,true,diffBefore)
        //     console.log(diffAfter)
        //     drawDiv(diffAfter)
        //     setTimeout(()=>{
        //         let diffBefore=diff(result2)
        //         let diffAfter=diff(result1,true,diffBefore)
        //         drawDiv(diffAfter)
        //     },2000)
        // },4000)
    </script>
</body>

</html>